<!--
 * @Description: 系统首页
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:02
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:01:06
-->
<template>
  <div>
    <div class="box_1">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading">加载中...</div>

      <!-- 数据展示 -->
      <template v-else>
        <div class="card" v-for="(card, index) in cards" :key="index">
          <div class="card-content">
            <h3 class="card-title">{{ card.title }}</h3>
            <div class="card-value">{{ card.value }}个</div>
          </div>
        </div>
      </template>
    </div>
    <div class="box_2">
      <div class="map-container">
        <Map :empData="validEmpData" @marker-click="handleMarkerClick" />
      </div>
      <div class="charts-container">
        <div class="row">
          <C221 class="ring-container" />
          <C222 class="dualaxes-container" />
        </div>
        <C223 class="bar-container" />
      </div>
    </div>
  </div>


</template>

<script>
import axios from 'axios'
import { get } from '@/utils/request';
import { mapMutations, mapState } from 'vuex';
import AMapLoader from '@amap/amap-jsapi-loader'; // 新增导入
import Map from './components/Map.vue'
import Pie from './components/C221.vue'
import C221 from './components/C221.vue';
import C222 from './components/C222.vue';
import C223 from './components/C223.vue';


export default {
  components: { Map, C221, C223, C222 },
  data() {
    return {
      loading: true,
      cards: [
        { title: '设备总数', key: 'deviceTotal', type: '设备总数' },
        { title: '在线设备数', key: 'onlineDevices', type: '在线设备总数' },
        { title: '离线设备数', key: 'offlineDevices', type: '离线设备数' },
        { title: '工程总数', key: 'projectTotal', type: '工程总数' },
        { title: '工单总数', key: 'workOrderTotal', type: '工单总数' }
      ],
      empData: []
    };
  },
  computed: {
    ...mapState([])
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('http://114.215.185.221:7001/count/countAll') // 替换为实际接口地址
        if (response.data.status === 200) {
          this.updateCardData(response.data.data)
        }
      } catch (error) {
        console.error('数据获取失败:', error)
        this.$message.error('数据加载失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    updateCardData(apiData) {
      this.cards = this.cards.map(card => {
        // 在返回数据中查找匹配的type
        const match = apiData.find(item => item.type === card.type)
        return {
          ...card,
          value: match ? match.value : 0
        }
      })

    },
    async loadEmpData() {
      try {
        const res = await get('/dashboard/findEngineerDeviceTree');
        this.empData = res.data.flatMap(item =>
          (item.children || []).map(it => {
            // 强制转换为数值类型
            const lng = Number(it.lng);
            const lat = Number(it.lat);

            // 增强数据校验
            if (
              typeof lng !== 'number' ||
              typeof lat !== 'number' ||
              isNaN(lng) ||
              isNaN(lat) ||
              lng < 73 || lng > 135 || // 中国经度范围
              lat < 3 || lat > 53      // 中国纬度范围
            ) {
              console.error('非法坐标:', it);
              return null;
            }

            return {
              ...it,
              position: [lng, lat] // 确保为数字类型
            };
          }).filter(Boolean)
        );
      } catch (error) {
        console.error('数据加载失败:', error);
        this.empData = [];
      }
    }
  },
  async created() {
    await Promise.all([this.fetchData(), this.loadEmpData()]);
  },
  async mounted() {
  }
};
</script>


<style scoped>
.charts-container{
  flex: 1;
  display: flex;
}
.card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.card-title {
  text-align: left;
  margin: 15px 0 0 0;
  font-size: 18px;
}

.card-value {
  text-align: right;

  font-size: 14px;
  font-weight: bold;
}

.box_1 .card:nth-child(1) {
  background-color: #FDC660;
}

.box_1 .card:nth-child(2) {
  background-color: #FDA065;
}

.box_1 .card:nth-child(3) {
  background-color: #F86B66;
}

.box_1 .card:nth-child(4) {
  background-color: #E6003B;
}

.box_1 .card:nth-child(5) {
  background-color: #8774F2;
}

.box_1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 120px;
  margin: 0 0 14px 0;
  /* 下边距14px */
  padding: 10px;
  gap: 10px;
  background-color: white;
  color: black;
}

.card {
  flex: 1;
  height: 120px;
  margin: 0px 7px 0px 0px;
  padding: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: white;
}



/* 第二个盒子样式 */
.box_2 {
  display: flex;
  width: 100%;
  gap: 10px;
  height: 400px;
  margin: 42px 0 14px 0;
  background-color: white;
  color: black;
  position: relative;
  overflow: hidden;
  gap: 0;
}

.map-container {
  flex: 0 0 40%;
  /* 固定40%宽度 */
  height: 100%;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
}
.charts-container{
  flex: 1;
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  height: 100%;
  /* gap: 10px; */
  /* align-content: space-between;  */
}
.row {
  display: flex;
  gap: 10px;
  height: 50%;
}

.row > * {
  flex: 1;
  height: 100% !important;
  margin: 0;
  padding: 0;
}


 .ring-container,
 .dualaxes-container{
  height: 100% !important; /* 强制高度继承 */
  width: 100%;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 0;
  padding: 10px;
  box-sizing: border-box; /* 包含内边距 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
 }
 

.bar-container {
  flex: 1;
  height: 200px;
  margin-top: 0;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 移除原有定位干扰 */
.ring-container,
.dualaxes-container,
.bar-container {
  position: static !important;
  margin: 0 !important;
}


</style>